<script lang="ts" setup>
  import dayjs from 'dayjs';
  import { onMounted } from 'vue';
  import useTable from '@/hooks/table';
  import { Caddie } from '@/types/caddie';
  import { getCourseUserList } from '@/api/caddie';

  const props = defineProps<{
    courseId: string;
  }>();

  const emit = defineEmits(['close']);

  const { pager, loading, total, list } = useTable<Caddie>();

  const getData = async () => {
    loading.value = true;
    try {
      const res = await getCourseUserList({
        ...pager.value,
        courseId: props.courseId,
        valid: 1,
      });
      total.value = res?.data?.data?.total || 0;
      list.value = res?.data?.data?.list || [];
    } finally {
      loading.value = false;
    }
  };

  const handlePageIndexChanged = (pageIndex: number) => {
    pager.value.pageIndex = pageIndex;
    getData();
  };

  onMounted(() => {
    getData();
  });
</script>

<template>
  <a-drawer
    title="球童"
    visible
    :width="800"
    :footer="false"
    @cancel="emit('close')"
  >
    <a-table
      :bordered="{ cell: true }"
      :data="list"
      :loading="loading"
      row-key="id"
      size="small"
      :pagination="{
        total,
        current: pager.pageIndex,
        pageSize: pager.pageSize,
        showTotal: true,
        showJumper: true,
      }"
      @page-change="handlePageIndexChanged"
    >
      <template #columns>
        <a-table-column data-index="nickname" title="姓名" />
        <a-table-column data-index="phone" title="手机号" />
        <a-table-column data-index="gmtCreate" title="注册时间">
          <template #cell="{ record }">
            {{ dayjs(record.gmtCreate).format('YYYY/MM/DD HH:mm:ss') }}
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-drawer>
</template>
